<template>
    <div class="question-box">
        <div class="question-item">
            <div class="question-system">
                <div class="left-menu">
                    <div class="category-list">
                        <div class="category-item active">
                            <img src="@/assets/cate.png" alt="">
                            <span>默认分类(2)</span>
                            <span class="el-icon-arrow-right"></span>
                        </div>
                    </div>
                </div>
                <div class="right-content">
                    <div class="search-area">
                        <div class="search-row">
                            <el-input v-model="searchParams.question" placeholder="请输入题干信息"></el-input>
                            <el-input v-model="searchParams.id" placeholder="请输入上传人"></el-input>
                            <el-input v-model="searchParams.id" placeholder="请输入试题编号"></el-input>
                            <el-select v-model="searchParams.type" placeholder="请选择试题类型" style="width: 100%">
                                <el-option label="单选题" value="single"></el-option>
                                <el-option label="多选题" value="multiple"></el-option>
                                <el-option label="判断题" value="judge"></el-option>
                                <el-option label="填空题" value="fill"></el-option>
                            </el-select>
                            <el-select v-model="searchParams.difficulty" placeholder="请选择难易度" style="width: 100%">
                                <el-option label="简单" value="easy"></el-option>
                                <el-option label="中等" value="medium"></el-option>
                                <el-option label="困难" value="hard"></el-option>
                            </el-select>
                            <el-button>
                                <el-icon><RefreshLeft /></el-icon>重置
                            </el-button>
                            <el-button>
                                <el-icon><Search /></el-icon>查询
                            </el-button>
                        </div>
                    </div>
                    <div class="table-area">
                        <div class="search-area">
                            <div class="search-row">
                                <el-button type="primary" class="btns" @click="edit">
                                    <img src="@/assets/export.png" alt="">
                                    <span>导出</span>
                                </el-button>
                                <el-button class="danger">
                                    <img src="@/assets/dele.png" alt="">
                                    <span>删除</span>
                                </el-button>
                            </div>
                        </div>
                        <el-table ref="multipleTableRef" :data="questions" style="width: 100%" @selection-change="handleSelectionChange" >
                            <el-table-column type="selection" />
                            <el-table-column prop="content" label="题干信息"  width="150">
                                <template #default="scope">
                                    <el-tooltip class="box-item" effect="dark" :content="scope.row.content" placement="top-start" > <div class="text">{{ scope.row.content }}</div> </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="试题编号" />
                            <el-table-column prop="type" label="试题类型" />
                            <el-table-column prop="difficulty" label="难易度" />
                            <el-table-column prop="status" label="难易度">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.status" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="uploader" label="上传人" />
                            <el-table-column prop="uploadTime" label="上传时间" />
                            <el-table-column property="name" label="操作">
                                <template #default="">
                                <!-- <template #default="scope"> -->
                                    <div class="material-operations">
                                        <el-link type="primary" @click="questionShow = true" underline="false">预览</el-link>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="questionShow" width="50%" height="600px" top="15vh">
        <template #header>
            <div class="headers">
                <span>习题预览</span>
            </div>
        </template>
        <div class="exercise-preview">
            <div class="knowledge-point">
                <span class="knowledge-label">所属知识点：</span>
                {{ questionData.knowledgePoint }}
            </div>
            
            <div class="question-container">
                <div class="question-header">
                    <div class="question-type">{{ questionData.type }}</div>
                    <div class="question-text">{{ questionData.text }}</div>
                </div>
                <div class="options-list">
                <div v-for="(option, index) in questionData.options" :key="index" class="option-item" :class="{ selected: optionSele == index }" @click="optionSelect(index)">
                    <div class="left">
                        <span class="option-letter">{{ option.letter }}</span>
                        <span class="option-text">{{ option.text }}</span>
                    </div>
                    <span class="radio-button"></span>
                </div>
                </div>
            </div>
            
            <div class="answer-section">
                <div class="correct-answer">正确答案：{{ questionData.correctAnswer }}</div>
                <div class="analysis-text">{{ questionData.analysis }}</div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="questionShow = false"> 取消 </el-button>
                <el-button type="primary" @click="questionShow = false"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref } from 'vue'
    import { RefreshLeft,Search } from '@element-plus/icons-vue'
    const searchParams = ref({
        question: '',
        id: '',
        type: '',
        difficulty: '',
        status: ''
    });
    const questions = ref([
          {
            id: 'EX001',
            content: '第一章 产品结构设计基础',
            type: '单选题',
            difficulty: 'easy',
            status: true,
            uploader: '张老师',
            uploadTime: '2023-05-10'
          },
          {
            id: 'EX002',
            content: '第二章 产品结构设计基础',
            type: 'multiple',
            difficulty: 'medium',
            status: false,
            uploader: '李老师',
            uploadTime: '2023-05-12'
          },
          {
            id: 'EX003',
            content: '第三章 产品结构设计基础',
            type: 'single',
            difficulty: 'hard',
            status: true,
            uploader: '王老师',
            uploadTime: '2023-05-15'
          },
          {
            id: 'EX004',
            content: '第四章 产品结构设计基础',
            type: 'single',
            difficulty: 'medium',
            status: false,
            uploader: '赵老师',
            uploadTime: '2023-05-18'
          },
          {
            id: 'EX005',
            content: '第五章 产品结构设计基础',
            type: 'multiple',
            difficulty: 'easy',
            status: false,
            uploader: '陈老师',
            uploadTime: '2023-05-20'
          },
          {
            id: 'EX006',
            content: '第六章 产品结构设计基础',
            type: 'single',
            difficulty: 'hard',
            status: false,
            uploader: '刘老师',
            uploadTime: '2023-05-22'
          },
          {
            id: 'EX007',
            content: '第七章 产品结构设计基础',
            type: 'multiple',
            difficulty: 'medium',
            status: true,
            uploader: '黄老师',
            uploadTime: '2023-05-25'
          },
          {
            id: 'EX008',
            content: '第八章 产品结构设计基础',
            type: 'single',
            difficulty: 'easy',
            status: true,
            uploader: '周老师',
            uploadTime: '2023-05-28'
          }
    ]);
    const questionShow = ref(false);
    const questionData = ref({
        knowledgePoint: '知识点内容占位',
        type: '单选',
        text: '题目文本内容占位',
        options: [
            { letter: 'A', text: '答案一', selected: false },
            { letter: 'B', text: '答案二', selected: true },
            { letter: 'C', text: '答案三', selected: false },
            { letter: 'D', text: '答案四', selected: false }
        ],
        correctAnswer: 'B',
        analysis: '解析内容占位'
    });
    const optionSele = ref(0);
    const optionSelect = (e) => {
        optionSele.value = e
    };
</script>
<style scoped>
    .question-box{position: relative;}
    .question-item{width: 100%;background: #fff;border-radius: 8px;height: calc(85vh = 20px); }
    .question-system { display: flex;padding: 30px;gap: 30px; }
    .left-menu { width: 250px; background: white;overflow: hidden; border-radius: 8px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); border-radius: 20px; min-height: calc(100vh - 50px); }
    .category-list{margin-top: 30px;}
    .category-item { width: 100%; margin-bottom: 8px; cursor: pointer; display: flex; justify-content: start; align-items: center; padding: 10px;gap: 5px; }
    .category-item img{width: 20px;}
    .category-item.active { background-color: #ecf5ff; }
    .category-item:hover { background-color: #f5f7fa; }
    .right-content { width: 100%;}
    .search-row{ display: flex;flex-direction: row;gap: 10px; }
    .table-area { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .material-operations{display: flex;justify-content: space-around;}
    .operation-preview{width: 50px;cursor: pointer;}
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;}
    :deep( .search-row .el_select,.el_input ){height: 35px!important;}
    :deep( .el-select__wrapper ){height: 35px!important;}
    .danger{color: #D4424A;height: 35px;border: 1px solid #D4424A;display: flex;flex-direction: row;align-items: center;}
    .search-row img{width: 18px;height: 18px;}
    .search-row span{ margin-left: 5px; }

    .headers{text-align: left;}
    .exercise-preview { background: white; border-radius: 12px; overflow: hidden; }
    .preview-header { display: flex; justify-content: space-between; align-items: center;border-bottom: 1px solid #eaeef2; }
    .preview-title { font-size: 18px; font-weight: 600; color: #1f2f3d; }
    .question-header{display: flex;gap: 5px;align-items: center;margin-bottom: 10px;}
    .knowledge-point { padding: 10px; border-bottom: 1px solid #eaeef2; color: #606266; text-align: left; }
    .knowledge-label { font-weight: 500; margin-right: 8px; color: #303133; }
    .question-container { padding: 20px; }
    .question-type { display: inline-block; padding: 4px 15px 4px 15px; background: #1465E1; color: white; border-radius: 50px; font-size: 12px; font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .question-text { font-size: 14px; color: #303133; font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .options-list { display: grid; gap: 12px; }
    .option-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f5f7fa; border-radius: 8px; border: 1px solid #eaeef2; }
    .option-letter { font-weight: 500; margin-right: 12px; color: #606266; font-family: 微软雅黑, Microsoft YaHei, SimSun;  }
    .option-text { color: #303133; }
    .radio-button { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #dcdfe6; position: relative; margin-left: 10px; }
    .selected .radio-button { border-color: #1465E1; background: #1465E1; }
    .selected .radio-button::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: white; }
    .answer-section { padding: 20px; background: #f9fafc; border-top: 1px solid #eaeef2; }
    .correct-answer { color: #1465E1; font-weight: 500; margin-bottom: 12px;text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .analysis-text { color: #606266; text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
</style>